import React, { Component } from 'react';
import UploadImageSample from '@/components/UploadImageSample';
import { Form, Input, Button, Row, Col, message, DatePicker, Upload, Icon, Modal } from 'antd';
import { OssUpload } from 'scd';
import { connect } from 'dva';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;

@Form.create()


@connect(({ loading,authentication: { information } }) => ({
  information,
  loading: loading.effects['authentication/sendAuthentication'],
  infoLoading:loading.effects['authentication/getIdentity'],
  
}))
class Authentication extends Component {
  state = {
    confirmDirty: false,
  };

  componentDidMount() {
   const typeName =  this.props.typeName;
   console.log(typeName);
   if(typeName ==='creatNew'){
    // this.props.dispatch({
    //   type: 'authentication/getIdentity',
    // });
   }
  }

  
  getURLparams = (name)=> {
    let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
    let r = window.location.search.substr(1).match(reg)
    if (r != null) return decodeURI(r[2])
    return null
    }


  handleChange = ({ fileList }) => this.setState({ fileList });

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, changeStatus } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const  IdentityApplyReq = {};
        IdentityApplyReq.name = values.name;
        IdentityApplyReq.identityNumber = values.identityNumber;
        IdentityApplyReq.picBackId = values.picBackId[0].response.id;
        IdentityApplyReq.picFrontId = values.picFrontId[0].response.id;
        IdentityApplyReq.validEndTime  = values.rangePicker[1].format('YYYY-MM-DD HH:mm');
        IdentityApplyReq.validStartTime  = values.rangePicker[0].format('YYYY-MM-DD HH:mm');
        dispatch({
          type: 'authentication/sendAuthentication',
          payload: IdentityApplyReq,
        })
          .then(msg => {
            changeStatus(true);
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };
  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const {
      form: { getFieldDecorator,  getFieldValue },
      loading, 
      infoLoading,
      information
    } = this.props;
    console.log('=====>',information)
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    const formItemLayout2 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const rangeConfig = {
      rules: [{ type: 'array', required: true, message: 'Please select time!' }],
    };
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return (
      <Form onSubmit={this.handleSubmit}>
        <Row>
          <Col span={12}>
            <FormItem label="姓名" {...formItemLayout}>
              {getFieldDecorator('name', {
                initialValue: information&&information.name,
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="身份证号" {...formItemLayout}>
              {getFieldDecorator('identityNumber', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入身份证号码',
                  },
                ],
              })(<Input maxLength = {18} />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="证件有效期" {...formItemLayout}>
              {getFieldDecorator('rangePicker', rangeConfig)(<RangePicker />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={3}></Col>
          <Col span={4}>
              <FormItem labelCol={{ span: 9 }} wrapperCol={{ span: 15 }}>
                  {getFieldDecorator('picFrontId', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                    initialValue: information&&information.picFrontId,
                    rules: [
                      {
                        required: true,
                        message: '请上传证件正面',
                      },
                    ],
                  })(
                    <OssUpload
                      name="logo"
                      listType="picture-card"
                      data={{
                        businessId: 0,
                        businessType: 'string',
                        companyId: 0,
                        digestMethod: 1,
                        ext: '',
                        moduleCode: 'company',
                        productLineId: 0,
                        userId: 1,
                      }}
                    >
                      {getFieldValue('picFrontId') && getFieldValue('picFrontId').length === 1 ? null : (
                        <>
                          <Icon type="plus" />
                          <p>上传证件正面</p>
                        </>
                      )}
                    </OssUpload>
                  )}
                </FormItem>
          </Col>
          <Col span={4}>
            <UploadImageSample />
          </Col>
          <Col span={3}>
          <FormItem labelCol={{ span: 9 }} wrapperCol={{ span: 15 }}>
                  {getFieldDecorator('picBackId', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                    initialValue: information&&information.picBackId,
                    rules: [
                      {
                        required: true,
                        message: '请上传证件反面',
                      },
                    ],
                  })(
                    <OssUpload
                      name="logo"
                      listType="picture-card"
                      data={{
                        businessId: 0,
                        businessType: 'string',
                        companyId: 0,
                        digestMethod: 1,
                        ext: '',
                        moduleCode: 'company',
                        productLineId: 0,
                        userId: 1,
                      }}
                    >
                      {getFieldValue('picBackId') && getFieldValue('picBackId').length === 1 ? null : (
                        <>
                          <Icon type="plus" />
                          <p>上传证件反面</p>
                        </>
                      )}
                    </OssUpload>
                  )}
                </FormItem>
          </Col>
          <Col span={4}>
            <UploadImageSample />
          </Col>
        </Row>
        <Row>
          <Col offset={3} style={{ marginTop: 15, marginBottom: 35 }}>
            支持.png .pdf .jpg格式上传，大小5m以内.
          </Col>
          <Col span={24} style={{ textAlign: 'center' }}>
            <Button type="primary" htmlType="submit" disabled={loading}>
              {loading ? '请稍后' : '确定'}
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Authentication;
